<template>
<ion-page>
    <ion-header>
        <ion-toolbar>
            <ion-buttons slot="start">
                <ion-back-button></ion-back-button>
            </ion-buttons>
            <ion-buttons slot="end">
                <ion-button fill="outline" @click="openModal">Validate</ion-button>
            </ion-buttons>
        </ion-toolbar>
    </ion-header>
        <!-- 事件证认 -->
        <ion-modal :is-open="isModalOpen" @didDismiss="isModalOpen = false">
            <ion-header>
                <ion-toolbar>
                    <ion-title>event validate</ion-title>
                    <ion-buttons slot="end">
                        <ion-button @click="isModalOpen = false" fill="clear">Close</ion-button>
                    </ion-buttons>
                </ion-toolbar>
            </ion-header>
            <ion-content class="ion-padding">
                
            </ion-content>
        </ion-modal>
        
    <ion-content>
        <ion-grid>
           <ion-list v-if="items">
                <ion-item v-for="item in items" :key="item.id">
                    <ion-row>
                    <ion-col size="12">{{ 'MISSION : ' }}{{ item.triggerTelescopeName }}</ion-col>
                    <ion-col size="12">{{ 'TRIGGER NAME : ' }}{{ item.triggerName }}</ion-col>
                    <ion-col size="12">{{ 'EVENT NAME : ' }}{{ item.eventName }}</ion-col>
                    <ion-col size="12">{{ 'SVOM BURST ID : ' }}{{ item.svomBurstId }}</ion-col>
                    <ion-col size="12">{{ 'TYPE : ' }}{{ item.triggerTypeName }}</ion-col>
                    <ion-col size="12">{{ 'TRIGGER TIME : ' }}{{ item.triggerTime }}</ion-col>
                    <ion-col size="12">{{ 'RA : ' }}{{ item.triggerRa }}</ion-col>  
                    <ion-col size="12">{{ 'DEC : ' }}{{ item.triggerDec }}</ion-col>  
                    <ion-col size="12">{{ 'ERR : ' }}{{ item.triggerErr }}</ion-col> 
                    <ion-col size="12">{{ 'VALIDATION : ' }}{{ item.validated }}</ion-col>  
                </ion-row>
                </ion-item>
           </ion-list>
        </ion-grid>

        
    </ion-content>
</ion-page>
</template>

<script setup lang="ts">
import service from '@/api/api'
import { onMounted} from 'vue';
import { IonContent,
    IonGrid,
    IonCol,
    IonList,
    IonRow,
    IonPage,
    IonHeader,
    IonToolbar,
    IonButtons,
    IonBackButton,
    IonItem,
    IonButton,
    IonModal,
    IonTitle} from '@ionic/vue';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
const isModalOpen = ref(false);
const openModal = () => {
  isModalOpen.value = true;
};
 
const items=ref({item:{
  triggerTelescopeName:'',
  eventName: '',
  triggerName: '',
  svomBurstId:'',
  triggerTypeName:'',
  triggerTime: '',
  triggerRa: '',
  triggerDec: '',
  triggerErr: '',
  validated:'',
  id:''
  }
})
const route =useRoute();

const fetchData =async () => {
      try {
        
        const response = await service.post('/alertApi/getTriggers', { params: { item: route.params.item } });
        items.value = response.data.data.list;         
          console.log(response.data);
      } catch (error) {
        // 处理请求错误
        console.error('Error fetching data:',error);
      }
    }  
    onMounted(fetchData);
</script>

<style scoped>

</style>